<template>
  <div class="headerBox">
    <el-header style="width: 1200px">
      <div class="logoBox"></div>
      <h1 class="animate__animated animate__rubberBand">
        病 人 标 签 信 息 管 理 系 统
      </h1>
      <el-dropdown @command="handleCommand" class="username">
        <span class="el-dropdown-link">欢迎您， {{ username
          }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu class="tablex" slot="dropdown">
          <el-dropdown-item command="adminTable">账号管理</el-dropdown-item>
          <el-dropdown-item command="logout">注销</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex';
  export default {
    data() {
      return {
        isCollapse: true, //下拉小菜单
        username: "", //用户名
      }
    },
    methods: {
      //注销方法
      handleCommand(command) {
        const _this = this;
        if (command == "logout") {
          console.log("注销")
          _this.getRequest("/api/loginout").then((res) => {
            if (res.data.code == 200) {
              _this.$clearCookie("token");
              _this.$clearCookie("username");
              _this.$router.replace("/");
              this.$notify({
                title: "用户已注销",
                type: "success",
              });
            } else {
              _this.$message.error("注销失败！");
            }
          });
        }
        if (command == "adminTable") {
          _this.$router.push("/AdminTable");
        }
      },
    },
    created() {
      const _this = this;
      var username = _this.$getCookie("username");
      _this.username = username;
    },
  }
</script>

<style lang="css" scoped>
  @import '../assets/css/theheader.css';
</style>
